<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>

    <div id="app">
        <ul>
            <li>
                <router-link to='/user'>主页</router-link>
            </li>
            <li>
                <router-link to='/user/detail?name=孙小双&age=33'>详情</router-link>
            </li>
            <li>
                <router-link to='/user/score?yuwen=55&yingyu=45&shuxue=100'>分数</router-link>
            </li>
            <li>
                <router-link :to='{ name: "history", params: { total: [ 512, 666, 381 ] } }'>历史记录</router-link>
            </li>
            <li>
                <router-link :to='{ path: "/user/score", query: { yuwen: 99, yingyu: 34, shuxue: 120 } }'>另一个分数
                </router-link>
            </li>
            <li>
                <router-link :to='{ name: "log", params: { id: "234" }, query: { name: "孙小双" } }'>用户日志</router-link>
            </li>
            <li>
                <router-link :to='{ name: "setting" }'>系统设置</router-link>
            </li>
        </ul>
        <router-view />
    </div>

    <script>
        var User = {
            template: `
            <div>
                <h1>用户信息：{{ $route.params.id }}</h1>
                <router-view />
            </div>
            `
        }
        var UserIndex = {
            template: `
                <h1>主页</h1>
            `
        }
        var UserDetail = {
            template: `
                <div>
                    <p>我的姓名：{{ $route.query.name }}</p>
                    <p>我的年龄：{{ $route.query.age }}</p>
                </div>
            `
        }
        var UserScore = {
            template: `
                <div>
                    <p>语文：{{ $route.query.yuwen }}</p>
                    <p>英语：{{ $route.query.yingyu }}</p>
                    <p>数学：{{ $route.query.shuxue }}</p>
                </div>
            `
        }
        var UserHistory = {
            template: `
                <div>
                    <p v-for="item in $route.params.total">总分：{{ item }}</p>
                </div>
            `,
            created() {
                console.log(this.$route)
            }
        }
        var Log = {
            template: `
                <div>
                    <p>用户：{{ id }}</p>
                    <p>记录时间：{{ new Date() }}，内容：{{ "天空飘来一声巨响" }}</p>
                </div>
            `,
            props: ['id'],
            created() {
                console.log(this)
            }
        }
        var Setting = {
            template: `
                <div>
                    <p>系统类型：{{ type }}</p>
                    <p>总记录数：{{ record }}</p>
                </div>
            `,
            props: ["type", 'record']
        }
        var routes = [
            {
                path: '/user', component: User, children: [
                    { path: '', component: UserIndex },
                    { path: 'detail', component: UserDetail },
                    { path: 'score', component: UserScore },
                    { path: 'history', component: UserHistory, name: "history" }
                ]
            },
            { path: "/log/:id", name: "log", component: Log, props: true },
            { path: "/setting", name: "setting", component: Setting, props: { type: 1, record: 2 } }
        ]
        var router = new VueRouter({
            routes,
        })
        new Vue({
            router
        }).$mount("#app")
    </script>
</body>

</html>